<template>
  <view class="container">
    <!-- 显示余额 -->
    <view class="bgc">
      <view class="balance">
        <image src="../../static/mine/walletbgc.png" mode="" style="width: 702rpx; height: 328rpx"></image>
        <view class="money">￥{{ money }}</view>
        <view class="txt">钱包余额</view>
        <image src="../../static/mine/coin.png" style="width: 206rpx; height: 211rpx; position: absolute; right: 0; bottom: 0" mode=""></image>
      </view>
    </view>
    <!-- 充值部分 -->
    <view class="topup">
      <!-- 余额充值 -->
      <view class="yue flex" @click="goaccounttopup">
        <image src="../../static/mine/chongzhiyue.png" style="width: 60rpx; height: 60rpx; margin-right: 18rpx" mode=""></image>
        <text style="padding-right: 56rpx">账户余额</text>
        <uni-icons type="right" size="15"></uni-icons>
      </view>
      <!-- 充值卡充值 -->
      <view class="flex chongzhika" @click="gocardtopup">
        <image src="../../static/mine/chongzhika.png" style="width: 60rpx; height: 60rpx; margin-right: 18rpx" mode=""></image>
        <text style="padding-right: 30rpx">充值卡充值</text>
        <uni-icons type="right" size="15"></uni-icons>
      </view>
    </view>
    <!-- 交易明细 -->
    <view class="title">交易明细</view>
    <view class="device"></view>
    <!-- 交易明细记录 -->
    <scroll-view scroll-y="true" @scrolltolower="more" class="list" id="list" :style="{ height: listheight + 'px' }">
      <view class="item flex sb" v-for="item in list" :key="item.id">
        <view>
          <view style="font-weight: 500; font-size: 28rpx; color: #001636">{{ item.memo }}</view>
          <view style="font-weight: 500; font-size: 26rpx; color: #666666; margin-top: 14rpx">{{ item.topuptime }}</view>
        </view>
        <view style="font-weight: bold; font-size: 32rpx; color: #001636">{{ item.type == 1 ? '+' + item.money : '-' + item.money }}</view>
      </view>
    </scroll-view>
    <!-- <view class="list" id="list" :style="{ height: listheight + 'px' }"></view> -->
  </view>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      listheight: '', // list的高度
      list: [], // y余额明细列表
      money: ''
    };
  },

  // onLoad() {
  //   this.getyuelist();
  // },

  methods: {
    // 获取余额明细
    getyuelist() {
      this.http('/user/myWallet').then((res) => {
        console.log('余额明细', res);
        res.data.list.forEach((item) => {
          item.topuptime = dayjs(item.createtime * 1000).format('YYYY-MM-DD hh:mm:ss');
        });
        console.log('修改后的', res);
        this.list = res.data.list;
        this.money = res.data.money;
      });
    },
    more() {
      console.log('触底了，加载更多');
    },
    // 跳转到余额充值
    goaccounttopup() {
      uni.navigateTo({
        url: '/mine/accounttopup/accounttopup'
      });
    },
    // 充值卡充值
    gocardtopup() {
      uni.navigateTo({
        url: '/mine/cardtopup/cardtopup'
      });
    }
  },

  onShow() {
    console.log(1111);
    this.getyuelist();
    uni.getSystemInfo({
      success: (e) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select('#list')
          .boundingClientRect((data) => {
            this.listheight = e.screenHeight - data.top;
            console.log('list的高度', this.listheight);
          })
          .exec();
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
}
.sb {
  justify-content: space-between;
}
.container {
  box-sizing: border-box;
  // height: 100vh;
  // overflow: hidden;
  .bgc {
    width: 100%;
    height: 300rpx;
    background-color: #1b71ef;
    border-radius: 0 0 150rpx 150rpx;
    .balance {
      box-sizing: border-box;
      position: relative;
      left: 24rpx;
      top: 50rpx;
      width: 702rpx;
      height: 328rpx;
      .money {
        position: absolute;
        top: 82rpx;
        left: 44rpx;
        font-weight: bold;
        font-size: 48rpx;
        color: #ffffff;
      }
      .txt {
        position: absolute;
        top: 176rpx;
        left: 52rpx;
        font-weight: 500;
        font-size: 30rpx;
        color: #ffffff;
      }
    }
  }
  .topup {
    display: flex;
    align-items: center;
    margin-top: 80rpx;
    justify-content: center;
    .yue {
      box-sizing: border-box;
      width: 344rpx;
      height: 110rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin-right: 14rpx;
      padding: 25rpx 22rpx;
    }
    .chongzhika {
      box-sizing: border-box;
      width: 344rpx;
      height: 110rpx;
      padding: 25rpx 22rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  }
  .title {
    font-weight: bold;
    font-size: 30rpx;
    color: #001636;
    margin-top: 30rpx;
    margin-left: 46rpx;
  }
  .device {
    width: 74rpx;
    height: 10rpx;
    background: linear-gradient(263deg, #ffffff 0%, #1b71ef 100%);
    margin-left: 46rpx;
    margin-top: -10rpx;
  }
  .list {
    box-sizing: border-box;
    width: 702rpx;
    padding: 32rpx 22rpx;
    margin: 16rpx 24rpx;
    .item {
      width: 100%;
      height: 145rpx;
      border-bottom: 1px solid #dedede;
    }
  }
}
</style>
<style>
scroll-view ::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}
</style>
